{% extends "_layouts/examples.html" %}
{% block title %}Contextual menu / With indicator{% endblock %}

{% block standalone_css %}patterns_contextual-menu{% endblock %}

{% block content %}
<span class="p-contextual-menu--left">
  <button class="p-button--positive p-contextual-menu__toggle has-icon" aria-controls="menu-3" aria-expanded="false" aria-haspopup="true"><i class="p-icon--chevron-down is-light p-contextual-menu__indicator"></i><span>Take action</span></button>
  <span class="p-contextual-menu__dropdown" id="menu-3" aria-hidden="true">
    <span class="p-contextual-menu__group">
      <a href="#" class="p-contextual-menu__link">Commission</a>
      <a href="#" class="p-contextual-menu__link">Aquire</a>
      <a href="#" class="p-contextual-menu__link">Deploy</a>
    </span>
    <span class="p-contextual-menu__group">
      <a href="#" class="p-contextual-menu__link">Test hardware</a>
      <a href="#" class="p-contextual-menu__link">Rescue mode</a>
      <a href="#" class="p-contextual-menu__link">Mark broken</a>
    </span>
  </span>
</span>

<script>
  {% include 'docs/examples/patterns/contextual-menu/_script.js' %}
</script>
{% endblock %}
